<template>
	<view class="box">
		<u-loading-page :loading="loadingShow" bgColor="#ffffff94;" loadingColor="#a4b0be;" color="#a4b0be;"
			loadingText="订单加载中...." fontSize="30rpx"></u-loading-page>
		<view class="cont">
			<view class="line"></view>
			<view class="contBot" style="display: block;">
				<view @click="goDetail">
					<view class="leftImg">
						<image :src="snapshot.img" mode="aspectFill"></image>
					</view>
					<view class="rightCont">
						<view class="textOver" style="font-size: 35rpx;">
							{{snapshot.title}}
						</view>
						<view v-if="item.snapshot.specName" class="person" style="display: flex;">
							<text style="color: #aaaaaa;font-size: 30rpx;">{{item.snapshot.specName}}</text>
							<view style="margin-left: auto;">
								<uni-tag :text="item.type === 0 ? '自提' : (item.type === 3 ? '配送' : '快递')"
									:type="item.type === 0 ? 'royal' : (item.type === 3 ? 'primary' : 'success')">
								</uni-tag>
							</view>
						</view>
						<view class="contPrice">
							<view class="price">
								<text :class="item.hasRealUnit?'':'noLine'">￥{{item.totalUnitPrice}}</text>
							</view>
							<view class="bulkPrice" v-if="item.hasRealUnit">
								拼单价￥<text>{{item.realUnitPrice}}</text></view>
						</view>
						<text class="num">x{{item.count}}</text>
					</view>
					<view class="line" style="margin: 25rpx 0 20rpx;"></view>
				</view>
				<view class="bottomPrice">
					<view class="total">
						合计:
						<text class="littleMon">￥</text>
						<text>{{item.realPrice}}</text>

					</view>
					<!-- 退款按钮 -->
					<view class="" v-if="item.status !== 0 && item.status !== -1">
						<button size="mini" class="refund" plain @click="goRefund(item)">
							申请售后
						</button>
					</view>
				</view>
			</view>
		</view>
		<!-- <view class="bulkPerson">
			<view class="head"><text>3</text>人成团,当前有<text>2</text>人参团</view>
			<view class="line" style="margin: 20rpx 0;"></view>
			<view class="img">
				<image src="../../static/images/growVegetables/pay_icon.png" mode=""></image>
				<image src="../../static/images/growVegetables/pay_icon.png" mode=""></image>
				<view class="block">+</view>
			</view>
		</view> -->
		<view class="cont" v-if="item.qrCode && status != -1 && type !=1">
			<view class="head">
				<text class="textOver" style="font-size: 35rpx;">核销二维码</text>
			</view>
			<view class="line"></view>
			<view class="contBot" style="flex-direction: column;align-items: center;">
				<view>请向商家出示二维码</view>
				<image class="codeImg" :src="imgapi+item.qrCode" mode="aspectFill"></image>
			</view>
		</view>
		<view class="cont">
			<view class="head">
				<text class="textOver" style="font-size: 35rpx;">商家信息</text>
				<view>
					<u-button type="primary" icon="server-fill" text="联系商家" throttleTime="100" shape="square" size="mini" @click="goChat"></u-button>
				</view>		
			</view>
			<view class="line"></view>
			<view class="contBot">
				<view class="left-content">
					<view class="text">电话: {{phone}}</view>
					<view class="text">店铺名称: {{storeName}}</view>
					<view v-if="order.type===0" class="ziTi">自提地址：{{address}}</view>
				</view>
				<view class="detailsBoxRight">
					<button type="primary" @tap="callphone" plain size="mini">致电</button>
					<button type="primary" @tap="toMap" plain size="mini" v-if="order.type==0"
						style="margin-top: 15rpx;">导航</button>
				</view>
			</view>
		</view>
		<view class="cont">
			<view class="head">
				<text class="textOver" style="font-size: 35rpx;">订单信息</text>
				<!-- <text class="iconfont icon-shangjia1"></text> -->
						
			</view>	
			<view class="line"></view>
			<view class="contBot" style="">
				<view class="left-content">
					<view class="text">订单编号: {{item.orderNum}}</view>
					<view class="text">创建时间: {{params.createTime}}</view>
					<view class="text">订单状态: <rich-text style="display:inline-block;margin-left: 10rpx"
							:nodes="getStatus(order.status)"></rich-text>
					</view>
					<view class="text" v-if="order.type===1">
						快递单号: <text
							style="margin-left: 10rpx">{{order.expressNumber==undefined?"暂无快递单号":order.expressNumber}}</text>
						<br />
						快递运费: <text style="margin-left: 10rpx">
							￥{{order.freightPrice === undefined || order.freightPrice === null || order.freightPrice === "" ? 0 : order.freightPrice}}</text>
					</view>
					<!-- <view class="text">配送方式: {{}}</view> -->
				</view>
				<view class="detailsBoxRight" style="display: inline-block;">
					<button type="primary" @tap="copyBtn(item.orderNum)" plain size="mini" class="btnCopy">复制</button>
				</view>
			</view>
		</view>

		<!--  -->
		<view class=" cont" v-if="item.status==0">
			<view class="between head">
				<text style="font-size: 35rpx;">支付方式</text>
			</view>
			<view class="line"></view>
			<radio-group name="pay" @change="payWay" style="padding: 0 24rpx;">
				<view class="plotAddressBorder between3" style="margin-top: 0;">
					<view class="center_vertical">
						<view>
							<image
								src="https://www.tdtye.com/files/vegetable_mall_file/default/static/growVegetables/pay_icon.png"
								class="icon"></image>
						</view>
						<view>
							微信支付
						</view>
					</view>
					<view>
						<radio value="wechat" />
					</view>
				</view>
				<view class="plotAddressBorder between3">
					<view class="center_vertical">
						<view>
							<image
								src="https://www.tdtye.com/files/vegetable_mall_file/default/static/growVegetables/wallet_icon.png"
								class="icon">
							</image>
						</view>
						<view>
							余额支付
						</view>
					</view>
					<view>
						<radio value="balance" />
					</view>
				</view>
			</radio-group>
		</view>

		<button class="paybtn2" v-if="item.status==0" @click="pay(item.orderNum)" type="primary">立即支付</button>
		<button class="paybtn2" v-if="item.status==4||item.status==5" type="primary" @click="goEval">立即评价</button>
		<button class="paybtn2" v-else type="primary" v-if="order.type!=0&&order.status==2"
			@click="theGoodsShow=true">确认收货</button>
		<u-modal :show="theGoodsShow" title="确认收到货了吗？" :content='content' showCancelButton @cancel="theGoodsShow=false"
			@confirm="takeGoods" buttonReverse></u-modal>
		<!-- v-else-if="item.status==3" -->

	</view>
</template>

<script>
	import cartcontrol from '@/components/cartcontrol.vue'
	import Skeleton from '@/components/ls-skeleton/ls-skeleton.nvue';
	import hqsPopup from "@/components/hqs-popup/hqs-popup.vue"
	import {
		getTime
	} from "@/utils/auth.js"
	import SOtime from '@/js_sdk/fl-SOtime/SOtime.js'
	export default {
		components: {
			cartcontrol,
			Skeleton,
			hqsPopup,
			imgapi: "",
			payMode: "", //支付方式
			order: {},
		},
		data() {
			return {
				loadingShow: false,
				theGoodsShow: false,
				content: "为了保证您的售后权益，请收到商品确认无误后再确认收货",
				lat: "",
				lng: "",
				address: "",
				duration: 500,
				item: {},
				snapshot: {},
				address: {},
				phone: "",
				storeName: "",
				storeAvatar:"",
				order: {},
				params: {},
				imgapi: "",
				// 收货方式
				type: '',
			}
		},
		onLoad(e) {
			this.getItem(e)
		},

		onShareAppMessage(res) {
			let usId = uni.getStorageSync("usId")
			let route = this.$mp.page.route;
			if (res.from === 'button') {
				// 来自页面内转发按钮
				console.log(res.target)
			}
			setTimeout(() => {
				if (!usId) {
					uni.showToast({
						title: "您还未登录，登陆后小程序内任意页面分享链接，用户点击链接拼单后您即可获取佣金",
						icon: 'none',
						duration: 20000
					})
				}
			}, 2000)
			return {
				title: '快来体验种菜的乐趣吧😄~',
				path: route + `?&parentId=${uni.getStorageSync("usId")}`,
			}
		},

		methods: {
			goChat(){
				console.log("12313: ",12313);
				let id = uni.getStorageSync("usId")
				uni.navigateTo({					
					url: '/pages/HM-chat/User-Chat?id=' + id + '&sendid=' + this.order.merchantId +
						'&title=' + this.storeName + "&avatar=" + this.storeAvatar
				})
			},
			goDetail() {
				uni.redirectTo({
					url: `/pageA/shop/bulkDetail?id=` + this.order.groupGoodsId
				})
			},
			toMap() {
				uni.openLocation({
					// 传入你要去的纬度
					latitude: parseFloat(this.lat),
					// 传入你要去的经度
					longitude: parseFloat(this.lng),
					// 传入你要去的地址信息 不填则为空
					address: this.address,
					// 缩放大小
					scale: 10,
					success: function() {
						uni.hideLoading()
						console.log('成功的回调success');
					}
				})
			},
			getItem(e) {
				this.loadingShow = true
				const {
					item = {}
				} = e;
				this.item = JSON.parse(decodeURIComponent(item));
				console.log("this.item", this.item);
				this.imgapi = this.$reqConfig.URLIMAGE
				this.snapshot = this.item.snapshot

				//请求
				this.$axios({
					url: `user/usGroupGoodsOrder/orderDetail`,
					method: "post",
					data: {
						orderNum: this.item.orderNum
					}
				}).then((res) => {
					console.log('res', res);
					let obj = res.result
					this.address = obj.address
					this.lat = obj.lat
					this.lng = obj.lng
					this.phone = obj.phone
					this.storeName = obj.storeName
					this.storeAvatar = obj.storeAvatar
					this.order = obj.order
					this.item.freightPrice = obj.order.freightPrice					
					this.params = {
						...this.params,
						phone: obj.phone,
						storeName: obj.storeName,
						createTime: SOtime.time3(this.order.createTime),
					}
					this.loadingShow = false
				})
			},
			takeGoods() {
				//请求
				this.$axios({
					url: `user/usGroupGoodsOrder/theGoods`,
					method: "post",
					data: {
						orderNum: this.item.orderNum
					}
				}).then((res) => {
					uni.showToast({
						icon: 'none',
						title: res.result,
						duration: 1000
					})
					setTimeout(() => {
						uni.navigateBack({
							delta: 1
						})
					}, 1000)
				})
			},
			// getBtn(status) {
			// 	switch (status) {
			// 		case 1:
			// 			return '退款'
			// 		case 2:
			// 			return '退款'
			// 		case 3:
			// 			return '退还'
			// 		case 4:
			// 			return '申请售后'
			// 	}
			// },
			// 去退款
			goRefund(item) {
				// if (item.status == ) return
				// ../afterSales/returnOrder
				/* 0:未申请售后
				1:申请退款中
				2:退款完成 */
				if (this.order.afterSaleStatus == 0) {
					const items = JSON.stringify(item);
					uni.navigateTo({
						url: "../../pageA/afterSales/selectBulkAfterSale?item=" + encodeURIComponent(items)
					})
				} else {
					uni.navigateTo({
						url: `../../pageA/afterSales/returnOrderDetail?orderNum=${item.orderNum}`
					})
				}


			},

			getStatus(status) {
				switch (status) {
					case 0:
						return "<font style='color: #6b6a70'>待付款</font>"
					case 1:
						return "<font style='color: #409eff'>已支付(拼团中)</font>"
					case 2:
						return "<font style='color: #e1b919'>待收货</font>"
					case 3:
						return "<font style='color: #3daa3d'>待提货</font>"
					case 4:
						return "<font style='color: #67c23a'>已提货</font>"
					case 5:
						return "<font style='color: #9625c2'>待评价</font>"
					case 6:
						return "<font style='color: #1d6dc2'>已完成</font>"
					case -1:
						return "<font style='color: red'>已取消</font>"
					case -2:
						return "<font style='color: #ea8716'>已退款</font>"
				}
			},
			// 评价页
			goEval() {
				console.log("e", this.order)
				uni.navigateTo({
					url: `./eval?itemId=${this.order.groupGoodsId}&type=4&merchantId=${this.order.merchantId}&orderNum=${this.order.orderNum}`
				});

			},
			//单选事件
			payWay(e) {
				this.payMode = e.detail.value
			},
			//支付订单
			pay(orderNum) {
				if (!this.payMode) {
					uni.showToast({
						title: "请选择支付方式",
						icon: 'none',
						duration: 2000
					})
					return;
				}
				//成功提交执行对应操作
				//成功提交执行对应操作
				if (this.payMode == "balance") {
					uni.showLoading({
							title: "余额支付中......"
						}),
						this.balancePay(orderNum)
				} else {
					uni.showLoading({
							title: "微信支付中......"
						}),
						this.weChatPay(orderNum)
				}
			},
			weChatPay(orderNum) {
				this.$axios({
					url: "wx/pay/createJsApiOrder",
					method: "post",
					data: {
						orderNum: orderNum,
						type: 2
					}
				}).then((response) => {
					let that = this
					if (response.code == 0) {
						uni.requestPayment({
							provider: 'wxpay', //支付类型-固定值
							timeStamp: response.result.timeStamp, // 时间戳（单位：秒）
							nonceStr: response.result.nonceStr, // 随机字符串
							package: response.result.packageValue, // 固定值
							signType: response.result.signType, //固定值
							paySign: response.result.paySign, //签名
							success: function(response) {
								uni.showToast({
									title: '支付成功！',
									icon: "none",
								})
								that.dingyue()
							},
							fail: function(err) {
								uni.hideLoading()
								uni.showToast({
									title: '支付失败,请在订单列表处重新支付',
									icon: "none",
									duration: 1000
								})
								setTimeout(() => {
									uni.redirectTo({
										url: './bulkOrder'
									})
								}, 1000)
							},
						});
					}
				})
			},
			// 余额支付
			balancePay(orderNum) {
				this.$axios({
					url: `user/usGroupGoodsOrder/balancePay`,
					method: "post",
					data: {
						orderNum
					}
				}).then((res) => {
					uni.hideLoading()
					if (res.code == 0) {
						uni.showToast({
							title: "支付成功!",
							icon: 'none',
							duration: 1000
						})
						this.dingyue()
					}
					setTimeout(() => {
						uni.redirectTo({
							url: './bulkOrder'
						})
					}, 1000)
				})
			},

			dingyue() {
				//获取订阅消息权限
				uni.requestSubscribeMessage({
					//此处填写刚才申请模板的模板ID
					tmplIds: ['zihdFSPm2PxHZZPO5HUJkFTx3RtsWD1rxqzV5rtelLA'],
					complete(res) {
						//跳转到订单列表
						uni.redirectTo({
							url: '../../pages/mine/bulkOrder'
						})
						uni.hideLoading()
					},
				})
			},
			// 打电话
			callphone() {
				uni.makePhoneCall({
					phoneNumber: this.phone 
				});
			},
			// 复制
			copyBtn(value) {
				console.log(value);
				uni.setClipboardData({
					data: value,
					success: function() {
						uni.showToast({
							title: '复制成功',
							duration: 2000,
							icon: 'none'
						});
					},
					fail: function(err) {
						uni.showToast({
							title: '复制失败',
							duration: 2000,
							icon: 'none'
						});
					}
				});
			}
		}
	}
</script>

<style scoped>
	.refund {
		border-radius: 100rpx;
		border: 2rpx solid #999;
	}

	.codeImg {
		border: 2rpx solid #eee;
		width: 350rpx;
		height: 350rpx;
		margin: 30rpx;
	}

	.orderListbox3 {
		margin: 20rpx 0 30rpx;
		width: 660rpx;
		background-color: #fff;
		border-radius: 20rpx;
		height: 280rpx;
		padding: 20rpx;
	}

	.icon {
		width: 50rpx;
		height: 50rpx;
		margin-right: 20rpx;
		margin-top: 10rpx;
	}

	.plotAddressBorder {
		width: 100%;
		/* background-color: #000000; */
		margin-top: 20rpx;
		padding-top: 20rpx;
		border-bottom: 0.5rpx solid #eeeeee;
		display: flex;
		justify-content: space-between;
	}

	/deep/ .between3.data-v-16353827 {
		width: 100%;
	}

	.paybtn2 {
		background-color: #18BC37;
		margin: 20rpx 0;
	}

	.box {
		padding: 30rpx;
	}

	.btnCopy {
		width: 149rpx;
		height: 50rpx;
		line-height: 50rpx;
		border-radius: 100rpx;
		font-size: 30rpx;
		padding-bottom: 50rpx;
	}

	/* .back {
		position: absolute;
		z-index: -1;
		background-color: #86cc14;
		height: 600rpx;
		width: 100%;
		top: 0;
		left: 0;
		border-radius: 0 0 235rpx 116rpx;
	} */

	.cont {
		background-color: #FFFFFE;
		border-radius: 25rpx;
		overflow: hidden;
		margin-bottom: 30rpx;

	}

	.cont .head {
		padding: 18rpx 24rpx;
		font-weight: 700;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.cont .head .right {
		font-size: 30rpx;
		font-weight: normal;
	}

	.cont .head image {
		width: 30rpx;
		height: 30rpx;
		vertical-align: middle;
	}

	.line {
		height: 3rpx;
		background-color: #eee;
	}

	.cont .contBot {
		padding: 0 30rpx;
		display: flex;
		justify-content: space-between;
		padding: 18rpx 24rpx;
	}

	.contBot .leftImg {
		width: 150rpx;
		height: 150rpx;
		border-radius: 15rpx;
		overflow: hidden;
		position: absolute;
		border: 2rpx solid #eee;
	}

	.contBot .leftImg image {
		width: 100%;
		height: 100%;
	}

	.contBot .leftImg text {
		display: inline-block;
		color: #FFFFFE;
		background-color: #86cc14;
		position: absolute;
		top: -2px;
		left: 0px;
		font-size: 25rpx;
		padding: 0rpx 10rpx;
	}


	.contBot .rightCont {
		margin-left: 175rpx;
	}

	.contBot .rightCont .person {
		margin: 15rpx 0rpx;
		height: 50rpx;
	}

	.contBot .rightCont .contPrice {}

	.rightCont .contPrice .price {
		color: #aaaaaa;
		font-size: 25rpx;
		display: inline-block;
	}

	.rightCont .contPrice .price .noLine {
		text-decoration: none;
	}


	.rightCont .contPrice .price text {
		color: #ff7800;
		font-weight: bold;
		text-decoration: line-through;
		font-size: 38rpx;
		margin-right: 10rpx;
	}

	.rightCont .contPrice .bulkPrice {
		font-size: 26rpx;
		background: #86cc14;
		color: #fff;
		text-align: center;
		border-radius: 15rpx;
		display: inline-block;
		margin-left: 15rpx;
		padding: 5rpx 10rpx;
	}

	.num {
		float: right;
		margin-top: -34rpx;
		color: #cccccc;
		font-size: 30rpx;
	}

	.rightCont .contPrice .bulkPrice text {
		font-size: 40rpx;
		font-weight: bold;
	}

	.bottomPrice {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 10rpx;
	}

	.total {
		font-size: 36rpx;
	}

	.total text {
		color: #ff7800;
		font-weight: bold;
		margin-left: 5rpx;
	}

	.tit {
		font-size: 32rpx;
	}

	.bulkPerson {
		background: #fff;
		padding: 20rpx 30rpx;
		border-radius: 20rpx;
		margin-bottom: 30rpx
	}

	.bulkPerson .head {
		font-size: 35rpx;
		font-weight: bold;
	}

	.bulkPerson .head text {
		color: #87cc16;
	}

	.detailsBoxRight {
		width: 25%;
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: center;
	}

	.bulkPerson image {
		width: 70rpx;
		height: 70rpx;
		margin-right: 25rpx;
		vertical-align: bottom;
		border: 2rpx solid #eee;
		border-radius: 50%;
	}

	.top {
		text-align: center;
		font-size: 30rpx;
		background: #f5ffe6;
		margin-bottom: 35rpx;
		height: 90rpx;
		line-height: 90rpx;
		color: #86cc14;
		border-radius: 30rpx;
	}

	.block {
		display: inline-block;
		width: 70rpx;
		height: 70rpx;
		color: #cccccc;
		background: #eeeeee;
		text-align: center;
		line-height: 70rpx;
		border-radius: 50%;
		border: 2rpx dashed;
		box-sizing: border-box;
	}

	.left-content {
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		width: 450rpx;
	}

	.left-content .text {
		font-size: 29rpx;
		color: #a3a3a3;
	}

	.ziTi {
		font-size: 25rpx;
		font-weight: 800;
		color: red;
	}
</style>
